<template>
  <div>
    <el-card shadow="hover" class="box-card">
      <el-form ref="form" :model="searchForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="8">
            <!-- <el-form-item label="日期：">
              <el-date-picker
                v-model="searchForm.picker"
                class="selectBox"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item> -->
          </el-col>
          <el-col :span="8">
            <el-form-item label="统计角色：">
              <el-select v-model="searchForm.roleId" class="selectBox" placeholder="请选择角色">
                <el-option
                  v-for="item in roleList"
                  :key="item.id"
                  :label="item.roleName"
                  :value="item.id"
                  @click.native="
                    () => {
                      roleSelect(item)
                    }
                  "
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="统计数据：">
              <el-select v-model="searchForm.statisticalTypeId" class="selectBox" placeholder="请选择统计数据">
                <el-option v-for="item in statisticalData" :key="item.id" :label="item.statisticsName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col v-if="showData" :span="8">
            <el-form-item label="统计区域：">
              <el-select v-model="searchForm.grid" class="selectBox" placeholder="请选择区域">
                <el-option v-for="item in postion" :key="item.id" :label="item.gridName" :value="item.gridName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="图样：">
              <el-select v-model="pattern" class="selectBox" placeholder="请选择图样" @change="seleChange">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="">
              <el-button type="primary" @click="getList(1)">查询</el-button>
              <el-button type="info" @click="reset">重置</el-button>
              <el-button type="success" @click="exportExcel">导出Excel</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="hover" class="box-card">
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column prop="roleName" label="统计角色" align="center"> </el-table-column>
        <el-table-column prop="fullName" label="姓名" align="center"> </el-table-column>
        <el-table-column prop="statisticsName" label="统计数据" align="center"> </el-table-column>
        <el-table-column prop="count" label="数值" align="center"> </el-table-column>
        <!-- <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="detail(scope.row)" type="primary" size="small">详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        class="pageBox"
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :total="pageTotal"
        @current-change="getList"
        @prev-click="getList"
        @next-click="getList"
      ></el-pagination>
    </el-card>
    <el-card shadow="hover">
      <div id="chart" class="chart"></div>
    </el-card>
    <Detail ref="detail" :list-data="listData" />
  </div>
</template>

<script>
import * as api from '@/api/project'
import Detail from './detail.vue'
import superadmin from '@/api/superadmin'
export default {
  data() {
    return {
      // 筛选条件
      searchForm: {
        picker: [],
        roleId: '',
        statisticalTypeId: '',
        grid: '',
      },
      pattern: 'pie',
      // 角色列表
      roleList: [],
      // 区域列表
      postion: [],
      // 统计数据
      statisticalData: [],
      // 图样
      options: [
        {
          id: 'line',
          name: '折线',
        },
        {
          id: 'pie',
          name: '饼状',
        },
        {
          id: 'bar',
          name: '柱状',
        },
      ],
      current: 1,
      limit: 100,
      // 表格
      tableData: [],
      // 分页
      currentPage: 1,
      pageTotal: 0,
      // 显示统计区域
      showData: false,
      // 带入详情数据
      listData: {},
      chart: null,
      // 统计图数据
      statistics: [],
    }
  },
  components: {
    Detail,
  },
  created() {
    this.getRoleList()
    this.getList(1)
  },
  methods: {
    // 获取列表
    getList(e) {
      this.currentPage = e
      let data = {
        current: e,
        limit: 10,
        grid: this.searchForm.grid,
        roleId: this.searchForm.roleId,
        statisticalTypeId: this.searchForm.statisticalTypeId,
      }
      if (this.searchForm.picker.length) {
        data.startTime = this.searchForm.picker[0]
        data.endTime = this.searchForm.picker[1]
      }
      api.dataList(data).then(res => {
        if (res.code == '200') {
          this.pageTotal = res.data.total
          this.tableData = res.data.records
        }
      })
      api.tableData(data).then(res => {
        if (res.code == '200') {
          this.statistics = res.data
          this.$nextTick(() => {
            this.getLoadEcharts()
          })
        }
      })
    },
    // 打开详情
    detail(e) {
      this.$refs.detail.drawer = true
      this.listData = e
    },
    // 选择图样
    seleChange() {
      this.getLoadEcharts()
    },
    // 获取角色
    getRoleList() {
      api.statisticRole().then(res => {
        if (res.code == '200') {
          this.roleList = res.data
        }
      })
      superadmin.patrol(this.current, this.limit).then(e => {
        this.postion = e.data.List.records
      })
    },
    // 选择角色
    roleSelect(item) {
      this.getRoleStatistical(item.id)
      this.searchForm.statisticalTypeId = ''
      this.searchForm.grid = ''
      if (item.roleName.slice(0, 2) == '网格') {
        this.showData = true
      } else {
        this.showData = false
      }
    },
    // 获取统计数据
    getRoleStatistical(id) {
      let data = {
        id,
      }
      api.statisticalRoleList(data).then(res => {
        if (res.code == '200') {
          this.statisticalData = res.data
        }
      })
    },
    // 重置
    reset() {
      this.$data.searchForm = this.$options.data().searchForm
      this.getList(1)
    },
    // 导出excel
    exportExcel() {
      let data = {
        grid: this.searchForm.grid,
        roleId: this.searchForm.roleId,
        statisticalTypeId: this.searchForm.statisticalTypeId,
      }
      if (this.searchForm.picker.length) {
        data.startTime = this.searchForm.picker[0]
        data.endTime = this.searchForm.picker[1]
      }
      api.exportData(data).then(res => {
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        let elink = document.createElement('a')
        elink.download = '统计分析数据.xlsx'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        document.body.removeChild(elink)
      })
    },
    // 获取统计图
    getLoadEcharts() {
      if (this.chart != null && this.chart != '' && this.chart != undefined) {
        this.chart.dispose() //销毁
      }
      this.chart = this.$echarts.init(document.getElementById('chart'))
      let xData = this.statistics.map(item => {
        return item.fullName + ',' + item.statisticsName
      })
      let pieData = this.statistics.map(item => {
        return {
          name: item.fullName + ',' + item.statisticsName,
          value: item.count,
        }
      })
      var option = {
        tooltip: {
          trigger: this.pattern == 'pie' ? 'item' : 'axis',
          // axisPointer: {
          //   type: 'shadow',
          // },
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '数值',
            data: pieData,
            type: this.pattern,
            smooth: true,
            center: ['50%', '60%'],
            radius: [0, 200],
            barWidth: '60%',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)',
            },
          },
        ],
      }
      if (this.pattern != 'pie') {
        option.xAxis = {
          type: 'category',
          data: xData,
          axisTick: {
            alignWithLabel: true,
          },
        }
        option.yAxis = {
          type: 'value',
        }
      } else {
        delete option.xAxis
        delete option.yAxis
      }
      this.chart.setOption(option)
    },
  },
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 10px;
}
.selectBox {
  width: 100%;
}
.pageBox {
  margin-top: 10px;
  text-align: center;
}
.chart {
  width: 100%;
  height: 600px;
}
</style>
